<template>
  <div class="editor-demo-wrapper">
    <div class="component-example">
      <label class="example-title">使用示例</label>
      <div class="example">
        <editor :editorConfig="editorConfig" :editorContent="editorContent" @setEditorValue="reSetEditorValue"/>
        <div style="text-align: center;margin-top: 10px">
          <el-button size="small" type="danger" plain @click="resetForm">重置</el-button>
          <el-button size="small" type="primary" plain @click="lookFormData">查看</el-button>
        </div>
        <el-dialog :visible.sync="dialogVisible" title="查看">
          <div v-html="editorContent"></div>
        </el-dialog>
      </div>
    </div>
    <div class="component-document">
      <div class="import-property">
        <label class="prop-title">输入属性</label>
        <ul class="prop-lists">
          <li class="prop-item" v-for="(item,index) in editorProps" :key="index">
            <label class="prop-name">{{item.name}}：</label>
            <div class="prop-desc">
              <span> {{item.desc}}</span>
              <div class="sub-element-lists" v-if="item.lists && item.lists.length !== 0">
                <ul class="sub-lists">
                  <li class="sub-item" v-for="(op,i) in item.lists" :key="i">
                    <label class="sub-prop-name">{{op.name}}：</label>
                    <span class="sub-prop-value">{{op.desc}}</span>
                  </li>
                </ul>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="output-method">
        <label class="prop-title">输出方法</label>
        <ul class="prop-lists">
          <li class="prop-item" v-for="(item,index) in editorMethods" :key="index">
            <label class="prop-name">{{item.name}}：</label>
            <span class="prop-desc">{{item.desc}}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "EditorDemo",
  data() {
    return {
      editorConfig: {
        fontNames: ['宋体', '黑体', '微软雅黑', 'Arial', 'Tahoma', 'Verdana'],
      },
      editorContent: '',
      dialogVisible: false,
      // 富文本输入属性
      editorProps: [
        {name: 'editorContent', desc: '富文本编辑区初始内容'},
        {
          name: 'editorConfig',
          desc: '默认值：{}。富文本编辑器配置（可不传）',
          lists: [
            {name: 'menus', desc: 'Array，富文本的菜单项'},
            {name: 'fontNames', desc: 'Array，可选择的字体'},
            {name: 'colors', desc: 'Array，可选择的颜色'},
            {name: 'zIndex', desc: 'Number，默认值：1000，编辑区域的权重'},
            {name: 'debug', desc: 'Boolean，默认值：true，是否开启 debug 模式（debug 模式下错误会 throw error 形式抛出）'},
            {name: 'pasteFilterStyle', desc: 'Boolean，默认值：true，粘贴是否过滤样式'},
            {name: 'pasteIgnoreImg', desc: 'Boolean，默认值：false，粘贴内容时，忽略图片'},
            {name: 'showLinkImg', desc: 'Boolean，默认值：true，是否显示添加网络图片的 tab'},
            {name: 'uploadImgMaxSize', desc: 'Number，默认值：5 * 1024 * 1024，默认上传图片 max size: M'},
            {name: 'uploadImgMaxLength', desc: 'Number，默认值：10000，配置一次最多上传几个图片'},
            {name: 'uploadImgShowBase64', desc: 'Boolean，默认值：true，上传图片，是否显示 base64 格式'},
            {name: 'uploadImgServer', desc: 'Boolean，上传图片，server 地址（如果有值，则 base64 格式的配置则失效）'},
            {name: 'uploadFileName', desc: 'String，自定义配置 filename'},
            {name: 'uploadImgParams', desc: 'Object，上传图片的自定义参数 如token等'},
            {name: 'uploadImgHeaders', desc: 'Object，上传图片的自定义header 如Accept等'},
            {
              name: 'withCredentials',
              desc: 'Boolean，是否使用类似cookies,authorization headers(头部授权)或者TLS客户端证书这一类资格证书来创建一个跨站点访问控制（cross-site Access-Control）请求，在同一个站点下使用withCredentials属性是无效的。'
            },
            {name: 'uploadImgTimeout', desc: 'Number，默认值：10000，自定义上传图片超时时间 ms'}
          ]
        }
      ],
      // 富文本输出方法
      editorMethods: [
        {name: 'setEditorValue', desc: '参数：html。富文本编辑器修改内容时触发，在此方法中修改父组件内容的值。'},
        {name: 'linkCheck', desc: '参数：{text, link}。插入链接时候的格式校验，text是插入的文字、link是插入的链接。'},
        {
          name: 'pasteTextHandle',
          desc: '参数：content。对粘贴的文字进行自定义处理，返回处理后的结果。编辑器会将处理后的结果粘贴到编辑区域中。IE 暂时不支持，content 即粘贴过来的内容（html 或 纯文本），可进行自定义处理然后返回。'
        },
        {name: 'linkImgCheck', desc: '参数：src。插入网络图片的校验 src即图片的地址。'},
        {name: 'linkImgCallback', desc: '参数：url。插入网络图片的回调  url 即插入图片的地址。'},
        {
          name: 'customInsertUploadImgHooks',
          desc: '参数：{ insertLinkImg, result, editor }。图片上传(上传到服务器)并返回结果，自定义插入图片的事件，而不是编辑器自动插入图片。'
        },
        {name: 'beforeUploadImgHooks', desc: '参数：{ xhr, editor, files }。图片上传(上传到服务器)之前触发。'},
        {name: 'successUploadImgHooks', desc: '参数：{ xhr, editor, result }。图片上传(上传到服务器)并返回结果，图片插入成功之后触发。'},
        {name: 'failUploadImgHooks', desc: '参数：{ xhr, editor, result }。图片上传(上传到服务器)并返回结果，图片插入错误时触发。'},
        {name: 'errorUploadImgHooks', desc: '参数：{ xhr, editor }，图片上传(上传到服务器)出错时触发。'},
        {name: 'timeoutUploadImgHooks', desc: '参数：{ xhr, editor }，图片上传(上传到服务器)超时时触发。'}
      ],
    }
  },
  methods: {
    reSetEditorValue(val) {
      this.editorContent = val
    },
    resetForm() {
      this.editorContent = '';
    },
    lookFormData() {
      this.dialogVisible = true;
    },
  }
}
</script>

<style lang="scss" scoped>
@import "../../assets/styles/base_style";

.editor-demo-wrapper {
  width: 100%;
  height: 100%;
}
</style>
